<template>
  <div class="box">{{ 1 + 1 }} : {{ gcss.$domain }}</div>
  <div>
    <button @click="add">添加</button>
    <button @click="other">添加2</button>
    <button @click="convert">添加3</button>
  </div>
</template>
<script setup>
const other = () => {
  console.log(`other`)
}
</script>
<script>
export default {
  data() {
    return {}
  },
  methods: {
    add() {
      console.log(`helloworld`)
      let str = 'src="/static/images/home/close.png"'
      let reg = /src=["']\/static.+["']/
      let ms = str.match(reg)
      str.replace(reg, function(res) {
        let reg = /\/static(.+)['"]$/
        let ms = res.match(reg)
        let newSrc = `:src='gcss.$domain + "${ms[1]}"'`
        console.log(newSrc)
        return res
      })
      console.log(ms)
    },
    convert() {
      console.log(`helloworld`)
      let str = 'src="/static/images/home/close.png"'
      let reg = /:?src=["'](.+)["']/g
      let regNoG = /:?src=["'](.+)["']/
      let newStr = str.replace(reg, function(res) {
        let ms = res.match(regNoG)
        let tip = ms[1]
        if (tip.indexOf('`') == -1) {
          tip = '"' + tip + '"'
          let newSrc = `:src='staticRemote(${tip})'`
          return newSrc
        } else {
          return res
        }
      })
      console.log(newStr)
    }
  }
}
</script>
<style type="text/css">
.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
}
</style>
